<template>
	<div class="export-container" v-loading="fullscreenLoading" element-loading-spinner="el-icon-loading"
		element-loading-background="rgba(255,255,255,0.5)" :element-loading-text="$t('message.bhView.loading')">
		<!-- 第一行 -->
		<div class="nav">

		</div>

		<!-- Export Item -->
		<div class="export-item-container">
			<div class="item-container" v-for="(Itme, index) in export_item_arr" :key="index">
				<div class="item-nth-child">
					{{ Itme.title }}
				</div>
				<div v-for="(i, _index) in Itme.children" :key="_index">
					<el-button class="item" @click="exportItem(i)" :disabled="i.btn || i.temBtm">
						{{ i.title }}
					</el-button>
				</div>
			</div>
		</div>

		<AAExport v-if="export_dialog_flag && this.title == '定期肉厚測定記録'" @CloseExprotDiloag="export_dialog_flag = false"
			:title="title" :fileRadio="fileRadio" :fileTypeStr="fileRadio == 2
				? $t('message.reportFrom.exportFileRadio.radioPdf')
				: $t('message.reportFrom.exportFileRadio.radioExcel')
				" :selectMacData="selectMacData"></AAExport>
		<ABExport v-if="export_dialog_flag && this.title == '報告書一覧表'" @CloseExprotDiloag="export_dialog_flag = false"
			:title="title" :fileRadio="fileRadio" :fileTypeStr="fileRadio == 2
				? $t('message.reportFrom.exportFileRadio.radioPdf')
				: $t('message.reportFrom.exportFileRadio.radioExcel')
				" :selectMacData="selectMacData"></ABExport>
		<ACExport v-if="export_dialog_flag && this.title == '肉測検査付帯工事リスト'"@CloseExprotDiloag="export_dialog_flag = false" 
			:title="title" :fileRadio="fileRadio" :fileTypeStr="fileRadio == 2
				? $t('message.reportFrom.exportFileRadio.radioPdf')
				: $t('message.reportFrom.exportFileRadio.radioExcel')
				" :selectMacData="selectMacData"></ACExport>
	</div>
</template>

<script>
import eventBus from "@/eventBus/bus";
import AAExport from "./Export/A_A_Export";
import ABExport from "./Export/A_B_Export";
import ACExport from "./Export/A_C_Export";
import { getLocalStorage } from "@/utils/storage";
export default {
	name: "Export",
	props: {
		isShowDmgBtn: Boolean,
	},
	data() {
		return {
			export_item_arr: [
				{
					title: "追加帳票",
					titleFlg: false,
					children: [
						{
							title: "定期肉厚測定記録",
							_api: "",
							btn: false,
							temBtm: true,
						}, {
							title: "報告書一覧表",
							_api: "",
							btn: false,
							temBtm: true,
						}, {
							title: "肉測検査付帯工事リスト",
							_api: "",
							btn: false,
							temBtm: true,
						},
					],
				},
			],
			btnActiveClass: true,
			selectTitle: "",
			// 导出文件类型 2 excel  1 pdf
			fileRadio: "1",
			selectfileRadioStr: this.$t(
				"message.reportFrom.exportFileRadio.radioPdf"
			),
			// 2 所有机器  1 选中的机器
			selectRadio: "1",
			selectSelectRadioStr: this.$t(
				"message.reportFrom.exportFileRadio.justSelected"
			),

			value: 30,
			radioDisabledTop: false,
			radioDisabledBottom: false,
			rowDisabledIpt: true,

			leftListData: {},

			export_dialog_flag: false,

			import_dialog_flag: false,
			api: null,
			title: '',

			fullscreenLoading: false,

			selectPlantData: {},
			selectMacData: [],
			dmgFlg: false,
			LineNoFlg: false,

		};
	},
	components: {
		AAExport, ABExport, ACExport
	},
	watch: {
		"$store.state.macType"() {
			let flg = true;
			for (let i = 0; i < this.export_item_arr.length; i++) {
				let item = this.export_item_arr[i];
				item.children.forEach(w => {
					w.temBtm = flg;
				})
			}
		},
		"$store.state.btn_set_BHView2": {
			handler(newName, oldName) {
				if (!newName) {
					for (let i = 0; i < this.export_item_arr.length; i++) {
						let item = this.export_item_arr[i];
						item.children.forEach((w, n) => {
							if (n > 2) {
								w.btn = true;
							}
						})
					}
				} else {
					for (let i = 0; i < this.export_item_arr.length; i++) {
						let item = this.export_item_arr[i];
						item.children.forEach((w, n) => {
							w.btn = false;
						})
					}
				}
				console.log('newName', newName);
			},
			immediate: true,
			deep: true,
		},
		fileRadio(val) {
			this.selectfileRadioStr =
				val == "1"
					? this.$t("message.reportFrom.exportFileRadio.radioPdf")
					: this.$t("message.reportFrom.exportFileRadio.radioExcel");
		},

		// selectRadio(val) {
		// 	console.log(val, "@@@@@@@@@")
		// 	if (val == 2) {
		// 		eventBus.$emit("selectValue", true)
		// 	} else {
		// 		eventBus.$emit("selectValue", false)
		// 	}
		// 	this.selectSelectRadioStr =
		// 		val == "1"
		// 			? this.$t("message.reportFrom.exportFileRadio.justSelected")
		// 			: this.$t("message.reportFrom.exportFileRadio.allSelected");
		// },

		selectMacData: {
			immediate: true,
			deep: true,
			handler(val, oVal) {
				let flg = val.length == 0 ? true : false;
				for (let i = 0; i < this.export_item_arr.length; i++) {
					let item = this.export_item_arr[i];
					item.children.forEach(w => {
						w.temBtm = flg;
					})
				}
			},
		},
	},
	methods: {
		exportItem(i) {
			console.log(i)
			this.title = i.title;
			this.api = i._api;
			if (this.selectMacData.length > 0) {
				eventBus.$emit('showOffCustomer1');
				this.export_dialog_flag = true;
			}
		},
	},
	created() { },
	mounted() {

		eventBus.$on("reportformLeftChangePlant", (res) => {
			this.selectPlantData = res;
		});

		eventBus.$on("reportformLeftMacSelect", (res) => {
			this.selectMacData = res;
		});
	},
	beforeDestroy() {
		eventBus.$off("reportformLeftChangePlant");
		eventBus.$off("reportformLeftMacSelect");
	},
};
</script>
<style lang="scss" scoped>
.export-container {
	height: 100%;
}

.container {
	width: 100%;
	height: 100%;

	.nav {
		width: 100%;
		// height: 32px;
		display: flex;
		align-items: center;
		margin-top: 16px;
	}

	.nav:nth-child(2) {
		margin-top: 30px;
	}

	.tabs-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		width: 344px;
		min-height: 32px;
		border: 1px solid #d3d3d3;
		background: #fff;
		border-radius: 4px;
		margin-right: 24px;

		button {
			width: 50%;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			cursor: pointer;
		}

		button:nth-child(1) {
			border-right: 1px solid #d3d3d3;
		}

		.activeBtn {
			background: #106ebe;
			color: #fff;
		}

		::v-deep .el-radio {
			width: 50%;
			height: 32px;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0;
		}
	}

	.isSelect {
		background: #f8f8f8;
	}

	.row-input {
		display: flex;
		align-items: center;
		justify-content: flex-start;

		span {
			color: #333333;
		}

		::v-deep .el-input {
			width: 48px;
			height: 32px;
			margin: 0 8px;
		}

		::v-deep .el-input__inner {
			width: 48px;
			height: 32px;
		}

		::v-deep .el-input__inner.disabled:hover {
			cursor: pointer;
		}
	}

	.active-row-input {
		::v-deep .el-input__inner {
			background: rgb(255, 255, 225);
		}
	}

	.export-item-container {
		width: 100%;
		display: flex;
		// align-items: center;
		justify-content: flex-start;
		margin-top: 10px;

		.item-container {
			// width: 190px;
			margin-right: 24px;

			.item {
				width: 100% !important;
				height: 32px;
				margin-bottom: 12px;
				// color: rgba(0, 0, 0, 0.65);
				display: flex;
				align-items: center;
				line-height: 0px;
				justify-content: center;
				// background: #fff;
				// border: 1px solid #d3d3d3;
				border-radius: 4px;
				// cursor: pointer;
			}

			.item-nth-child {
				width: 100%;
				height: 32px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: bold;
				color: #1f2329;
				background: none;
				border: 0 none;
				margin: 0;
				cursor: text;

				::v-deep .el-checkbox {
					font-weight: bold;
					color: #1f2329;
					transform: translateX(-14px);
				}

				::v-deep .el-checkbox__input {
					transform: translateX(-8px);
				}

			}
		}
	}
}
</style>
